<template>
	<view class="bgf8">
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper style="height: 100vh;" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item" :key="index">
				<scroll-view scroll-y style="height: 100vh;width: 100%;" @scrolltolower="onreachBottom">
					<QB></QB>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item" :key="index">
				<scroll-view scroll-y style="height: 100vh;width: 100%;" @scrolltolower="onreachBottom">
					<QTZ></QTZ>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item" :key="index">
				<scroll-view scroll-y style="height: 100vh;width: 100%;" @scrolltolower="onreachBottom">
					<QTCG></QTCG>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item" :key="index">
				<scroll-view scroll-y style="height: 100vh;width: 100%;" @scrolltolower="onreachBottom">
					<QTSB></QTSB>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import QB from "./pintuuanQB/pintuuanQB"
	import QTZ from "./PinruanZ/PinruanZ"
	import QTCG from "./pintuanCG/pintuanCG"
	import QTSB from "./pintuanSB/pintuanSB"
	export default {
		components: {
			QB,
			QTZ,
			QTCG,
			QTSB
		},
		data() {
			return {
				idx: 0,
				list: [{
					name: '全部'
				}, {
					name: '拼团中'
				}, {
					name: '已完成'
				}, {
					name: '已失败'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		methods: {
			pt(idx) {
				this.idx = idx
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	}
</script>

<style>
	.title {
		position: relative;
		background: #FFFFFF;
	}

	.returnh {
		width: 20px;
		height: 20px;
		position: absolute;
		left: 34rpx;
		top: 25rpx;
	}

	.title>text {
		display: block;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		line-height: 88rpx;
	}

	.PT-title {
		width: 100%;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		display: flex;
		background: #FFFFFF;
	}

	.PT-title>view {
		width: 25%;
	}

	.PTcolor {
		color: rgba(36, 191, 129, 1);
		padding: 10rpx 0;
		border-bottom: 8rpx solid rgba(36, 191, 129, 1);
	}
</style>
